<template>
    <div class="goodsbuy">
        <div class="mui-card goodsbuy">
            <div class="mui-card-header">
                <h4>{{goodsinfo.title}}</h4>
            </div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                   <p class="price">
                       <span>市场价：<del>{{goodsinfo.market_price | priceFormat}}</del></span>
                       <span>销售价：<span class="sell-price">{{goodsinfo.sell_price | priceFormat}}</span></span>
                   </p>
                    <div class="numbox">
                        购买数量:
                        <div class="mui-numbox" style="width: 80px;height: 30px">
                            <button class="mui-btn mui-btn-numbox-minus" type="button" v-show="val>1" @click="val--">-</button>
                            <input class="mui-input-numbox" type="number" :value="val"/>
                            <button class="mui-btn mui-btn-numbox-plus" type="button" @click="val++">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mui-card-footer btn">
                <mt-button size="small" type="primary">立即购买</mt-button>
                <mt-button size="small" type="danger" @click="toshopcart">加购物车</mt-button>

            </div>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'
    export default {
        name: "goodsbuy",
        props:['goodsinfo'],
        data(){
            return {
                val:1
            }
        },
        methods:{
            toshopcart(){//子组件添加购物车按钮上的事件，要告诉父组件，我的按钮被点击了，
                // 父组件接收到了这个事件，他会做把商品添加购物车
                this.$emit('anniubeidian',this.val)
            }
        },

        watch:{ //侦听器，根据某个属性的值的变化，可以规定它的变化
            val:function (newvalue) {
                if (newvalue >=this.goodsinfo.stock_quantity){//如果点击增加的按钮获取到的新值大于等于库存数量，就让val 永远等于库存数
                    this.val = this.goodsinfo.stock_quantity;
                    Toast('您需要的数量超出库存数量了！')
                }
            }
        }

    }
</script>

<style scoped>
.mui-numbox{
    padding: 0 25px 0 25px;
}
.mui-numbox [class*=btn-numbox]{
    width: 25px;
}
    h4{
        font-size: 16px;
        line-height: 26px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .price,.btn{
        display: flex;
        justify-content: space-around;
    }
   .numbox{
       margin-left: 21px;
   }
    .sell-price{
        color: red;
        font-size: 18px;
    }
</style>
